<template>
  <view class="content">
	
	<view class="uni-padding-wrap" v-if="pictures.length>0">
		<view class="page-section swiper">
			<view class="page-section-spacing">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in pictures" :key="index">
						<view class="swiper-item ">
							<image :src="item.url" class="swiper-item-img"></image>
							<text>{{item.title}}</text>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
		</view>
	</view>  
	  
    <view class="banner" auto-focus>
      <image v-if="data.litpic && pictures.length==0"  class="banner-img" :src="data.litpic"></image>
      <view class="title-area">
        <text class="title-text">{{data.title}}</text>
      </view>
    </view>
    <view class="article-meta">
      <text class="article-meta-text article-author">{{data.source}}</text>
      <text class="article-meta-text article-text">发表于</text>
      <text class="article-meta-text article-time">{{data.addtime}}</text>
    </view>
    <view class="article-content">
      <rich-text :nodes="data.body" style="font-size: 14px;"></rich-text>
    </view>
    <view class="comment-wrap"></view>
  </view>
</template>

<script>
  import htmlParser from '../common/html-parser'
   var config = require('../common/util.js');

  const FAIL_CONTENT = '<p>获取信息失败1</p>';

  function parseImgs(nodes) {
    nodes.forEach(node => {
      if (
        node.name === 'img' &&
        node.attrs &&
        node.attrs['data-img-size-val']
      ) {
        const sizes = node.attrs['data-img-size-val'].split(',')
        const width = uni.upx2px(720 * 0.9)
        const height = parseInt(width * (sizes[1] / sizes[0]))
        node.attrs.style = `width:${width};height:${height};`
      }
      if (Array.isArray(node.children)) {
        parseImgs(node.children)
      }
    })
    return nodes
  }

  export default {
    data() {
      return {
		  id:0,
		  model:'',
        data: [],
        content: [],
		pictures:[],
		indicatorDots: true,
		autoplay: true,
		interval: 2000,
		duration: 500,
      }
    },
     // 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
	onShareAppMessage(res) {
		return {
		  title: this.data.title,
		  path: '/pages/detail?id='+this.id+'&model='+this.model,
		  imageUrl: this.data.litpic ? this.data.litpic : '/static/banner.png'
		}
	  },
	  // 自定义页面的分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.data.title,
			path: '/pages/detail?id='+this.id+'&model='+this.model,
			imageUrl: this.data.litpic ? this.data.litpic : '/static/banner.png'
		}
	},
    onLoad(event) {
      // 目前在某些平台参数会被主动 decode，暂时这样处理。
	  this.id = event.id;
	  this.model = event.model;
	  this.pictures = [];
      this.getDetail()
	  this.hits()
    },
	onShow(){
		// #ifdef MP-BAIDU
		if(this.pictures.length>0){
			var image = this.pictures;
		}else{
			var image = [ this.data.litpic ? this.data.litpic : '/static/banner.png' ]
		}
		swan.setPageInfo({
			title: this.data.title,
			keywords: this.data.keywords,
			description: this.data.description,
			articleTitle: this.data.seo_title,
			releaseDate: config.nowday(),
			image: image,
			/*
			video: [{
				url: 'https://www.baidu.com/mx/v12.mp4',
				duration: '100',
				image: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/image-scaleToFill.png'
			}],
			visit: {
				pv: '1000',
				uv: '100',
				sessionDuration: '130'
			},
			
			likes: '75',//点赞
			comments: '13',//评论
			collects: '23',//收藏
			shares: '8',//分享
			followers: '35',//关注
			*/
			success: res => {
				console.log('setPageInfo success', res);
			},
			fail: err => {
				console.log('setPageInfo fail', err);
			}
		})
		// #endif
	},
	
    methods: {
      changeIndicatorDots(e) {
          this.indicatorDots = !this.indicatorDots
      },
      changeAutoplay(e) {
          this.autoplay = !this.autoplay
      },
      intervalChange(e) {
          this.interval = e.target.value
      },
      durationChange(e) {
          this.duration = e.target.value
      },
      getDetail() {
		var that = this;
        uni.request({
          url: config.webapi + '/getData/index',
		  data:{
			  key:config.apikey,
			  id:this.id,
			  model:this.model
		  },
          success: (result) => {
         
			if(result.data.data[0].litpic){
				result.data.data[0].litpic = result.data.data[0].litpic.indexOf('http')>-1 ? result.data.data[0].litpic : config.filepath+result.data.data[0].litpic;
						  	 
			}
			var reg = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi;
					var www = config.filepath;
			result.data.data[0].body = result.data.data[0].body.replace(reg,function(a){
				if(a.indexOf('//')==-1){
					return a.replace( /src=\"([^"]+)\"/,"src=\""+www+"$1\"" );
				}
				
			});
			result.data.data[0].addtime = config.getLocalTime(result.data.data[0].addtime)
			this.data = result.data.data[0];
			if(result.data.data[0].pictures){
				var pictures = result.data.data[0].pictures.split('||');
				for(var i=0;i<pictures.length;i++){
					var p = pictures[i].split('|');
					var url = (p[0].indexOf('http')>-1) ? p[0] : config.filepath+p[0]
					that.pictures.push({"title":p[1],"url":url});
				}
			}
			
			
          }
        });
      },
	  
	  hits(){
	  	var that = this;
	  	uni.request({
	  		  url: config.webapi+'/getData/hits',
	  		  data: {
	  				  key:config.apikey,
	  				  model:this.model,
	  				  id:this.id,
	  				 
	  			  },
	  		  success: (res) => {
	  			
	  		  },
	  	})
	  },
	  
    }
  }
</script>

<style>
	.swiper-item{
		height: 100%;
	}
	.swiper-item-img{
		width: 100%;
		height: 100%;
	}
  /* #ifndef APP-PLUS */
  page {
    min-height: 100%;
  }

  /* #endif */

  .banner {
    
    position: relative;
    background-color: #ccc;
    flex-direction: row;
    /* overflow: hidden; */
  }

  .banner-img {
    flex: 1;
	width: 100%;
  }

  .title-area {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    z-index: 11;
  }

  .title-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    lines: 2;
    color: #ffffff;
    overflow: hidden;
  }

  .article-meta {
    padding: 10px 15px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .article-meta-text {
    color: gray;
  }

  .article-text {
    font-size: 12px;
    line-height: 25px;
    margin: 0 10px;
  }

  .article-author {
    font-size: 15px;
  }

  .article-time {
    font-size: 15px;
  }

  .article-content {
    font-size: 15px;
    padding: 0 15px;
    margin-bottom: 15px;
    overflow: hidden;
  }

  /* #ifdef H5 */

  .article-content {
    line-height: 1.8;
  }

  .article-content img {
    max-width: 100%;
  }

  /* #endif */
</style>
